<template>
  <el-card>
    <div slot="header">
      <span>订单统计</span>
      <el-date-picker
      value-format="yyyy-MM-dd HH:mm:ss"
      format="yyyy-MM-dd HH:mm:ss"
      size="small"
      v-model="date"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']">
    </el-date-picker>
   <el-button type="primary" size="small" @click="search">查询</el-button>

    </div>
    <div class="content">
 
      <div id="lineChart" style="height:400px"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts';
import {getOrdereChartsData} from "@/api/order"
import {formateDateYmd } from "@/filters"
export default {
  data() {
    return {
     
      date:[]
    }
  },
name:'OrderTotal',
methods:{
//  获取数据渲染报表
async getDataRenderCharts(){
  // 让清除时间后 date是数组而不是null传给后台
  this.date = this.date==null?[]:this.date
  let res = await getOrdereChartsData({date:JSON.stringify(this.date)})

    let xData = res.data.data.map((v)=>formateDateYmd(v.orderTime))
    let yData = res.data.data.map((v)=>v.orderAmount)
  //  传入获取的动态数据 渲染echarts
this.drawLine(xData,yData)
},

// 查询
  search(){
    this.getDataRenderCharts()

  },
  drawLine(xData,yData){
  const lineCharts = echarts.init(document.querySelector("#lineChart"));
 const option = {
  tooltip:{
    trigger:"axis"
  },
  xAxis: {
    type: 'category',
    data: xData,
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data:yData,
      type: 'line'
    }
  ]
};
 lineCharts.setOption(option)
  },
  resize(){

this.lineCharts.resize()
  }

},
   mounted(){
  this.getDataRenderCharts()
window.addEventListener('resize',this.resize)
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.resize)
  }
}
</script>

<style lang="less" scoped>
.el-button{
  margin-left: 30px;
}


</style>